<template>
  <!--商品分发-->
  <div v-if="editDialogVisible8">
    <el-form>
      <el-row class="tr">
        <el-form-item>
        <el-form-item>
          <kt-button type="primary" @click="handleEditDistribute" label="分发"></kt-button>
        </el-form-item>
      </el-form-item>
      </el-row>

      <el-table :data="merchantListData" border style="width: 100%">
        <el-table-column prop="name" label="商家名称"></el-table-column>
        <el-table-column prop="orgNumber" label="商家编码"></el-table-column>
      </el-table>
    </el-form>
    <!--添加商家弹窗-->
    <el-dialog
      title="添加商家"
      width="50%"
      :visible.sync="editDialogVisible81"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataFormMerchant"
        label-width="80px"
        ref="dataFormMerchant"
        :inline="true"
        :size="size"
      >
        <el-form-item label="商家名称" prop="name">
          <el-input v-model="dataFormMerchant.name"></el-input>
        </el-form-item>
        <el-form-item label="商品编码" prop="orgNumber">
          <el-input v-model="dataFormMerchant.orgNumber"></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-search"
            :label="$t('action.search')"
            type="primary"
            @click="findPageMerchant(null)"
          />
        </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-refresh" :label="$t('action.reset')"
            type="primary"
            @click="resetFormMerchant('dataFormMerchant')"
          />
        </el-form-item>
        <el-table
          ref="multipleTable"
          :data="queryMerchantListData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="商家名称"></el-table-column>
          <el-table-column prop="orgNumber" label="商家编码"></el-table-column>
        </el-table>
      </el-form>
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, prev, pager, next, jumper,sizes"
          @current-change="refreshPageRequest"
          @size-change="handleSizeChange"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible81 = false">
          {{
          $t("action.cancel")
          }}
        </el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormmDistribute"
          :loading="editLoading"
        >{{ $t("action.submit") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format, formatDate} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  export default {
    components: {
      KtButton,
      CyTable,
      TableColumnFilterDialog
    },
    data() {
      return {
        size: "small",
        editDialogVisible8: false,
        editDialogVisible81: false,
        editLoading: false,
        productId: 0,
        merchantListData: [],
        dataFormMerchant: {
          name: "",
          orgNumber: ""
        },
        dataFormDistribute: {},
        multipleSelection: [],
        queryMerchantListData: [],
        totalSize: 0,
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: [],
      };
    },
    mounted() {
    },
    methods: {
      init(param) {
        this.editDialogVisible8 = param.flag
        this.productId = param.productId
        if (param.flag) {
          this.queryProductDistribute(param)
        }
      },
      handleEditDistribute() {
        this.editDialogVisible81 = true
        this.findPageMerchant()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      queryProductDistribute(param) {
        let this_ = this;
        this.utils.request.queryProductDistribute(param, function (data) {
          if (data.data != null) {
            this_.merchantListData = data.data;
          }
        });
      },
      findPageMerchant: function () {
        let this_ = this;
        if (this_.dataFormMerchant == undefined || this_.dataFormMerchant == null) {
          this_.dataFormMerchant = {};
        }
        this_.dataFormMerchant.start = this.pageRequest.pageNum;
        this_.dataFormMerchant.limit = this.pageRequest.pageSize;
        this.utils.request.queryMerchantList(this_.dataFormMerchant, function (res) {
          this_.queryMerchantListData = res.data.rows;
          this_.totalSize=Number(res.data.total);
        });
      },
      resetFormMerchant(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.findPageMerchant(null);
        }
      },
      submitFormmDistribute: function () {
        this.$confirm("确认提交吗？", "提示", {}).then(() => {
          let this_ = this;
          let params = {};
          params.productId = this_.productId;
          params.merchantRequestList = this_.multipleSelection;
          this.utils.request.addProductDistribute(params, function (res) {
            if (res.code == "0000") {
              this_.editDialogVisible81 = false;
              let param = {
                productId:params.productId
              };
              this_.queryProductDistribute(param);
              this_.$message({message: "操作成功", type: "success"});
            } else {
              this_.$message({message: "操作失败, " + res.msg, type: "error"});
            }
          });
        });
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPageMerchant();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        this.findPageMerchant();
      },
    }
  };
</script>

<style scoped lang='scss'>
.tr{
  text-align: right;
}
</style>
